<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h3>你最喜欢？</h3>
        <input type="checkbox" @change="fullCheck()" v-model="all">全选<br>
        <span v-for="item in list"><input type="checkbox" @change="checkClick()" v-model="item.check">{{item.name}}</span>
        新增其他我喜欢的城市：<input type="text"><br>
        <input type="file"><button>上传</button><br>
        <br>
        <button @click="full(true)">全选</button>
        <button @click="full(false)">全不选</button>
        <button @click="rev()">反选</button><br>
        <span v-for="item in imgs">
            <img :src="item" alt="" style="width: 300px;height: 400px;">
        </span>
    </div>
</body>
</html>

<script>
    const connApp = Vue.createApp({
data() {
  return {
    list: [
      { name: '杭州', src: '两个兄弟.png', check: false },
      { name: '上海', src: '2222.png', check: false },
      { name: '苏州', src: '3333.png', check: false },
      { name: '三亚', src: '4444.png', check: false }
    ],
    imgs:[],
    all:false
  }
},
methods: {
    showImages(){
        this.imgs = []
    this.list.map(v => {
      if (v.check) {
        this.imgs.push(v.src)
      }
    })
    },
  checkClick() {
  let flag = this.list.length //先获取数组
  // 对数组进行遍历，如果碰到ch
  this.list.map(v=>{
    if(v.check==false) flag--
  })
  if(flag==this.list.length){
    this.all=true
  }else{
    this.all=false
  }
  this.showImages()

  },
fullCheck() {
  if (this.all) {
    this.list.map(v => { v.check = true })
  } else {
    this.list.map(v => { v.check = false })
  }
  this.showImages()
},
full(st) {
  this.list.map(v => {
    v.check = st
  })
  this.all = st
  this.showImages()
},
rev(){
    this.list.map(v => {
    v.check = !v.check
  })
  this.checkClick()
},



    }

    }).mount("#app")
</script>